<template>
  <div class="container appeal-container text-center mt-5">
    <h1 class="mb-4 page-title">申诉管理</h1>
    <table class="table table-striped table-hover appeal-table">
      <thead class="thead-light">
        <tr>
          <th class="text-center">ID</th>
          <th class="text-center">用户ID</th>
          <th class="text-center">标题</th>
          <th class="text-center">状态</th>
          <th class="text-center">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="appeal in appeals" :key="appeal.id">
          <td class="text-center">{{ appeal.id }}</td>
          <td class="text-center">{{ appeal.userId }}</td>
          <td class="text-center">{{ appeal.title }}</td>
          <td class="text-center">
            <span :class="statusClass(appeal.status)">{{ appeal.status }}</span>
          </td>
          <td class="text-center">
            <button class="btn btn-primary btn-sm mr-2" @click="viewDetails(appeal)">查看</button>
            <button class="btn btn-success btn-sm" @click="openReplyForm(appeal)">回复</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 查看申诉详情模态框 -->
    <el-dialog title="申诉详情" :visible.sync="detailDialogVisible" width="30%">
      <div class="text-left">
        <p><strong>内容：</strong> {{ selectedAppeal?.content }}</p>
        <p><strong>回复：</strong> {{ selectedAppeal?.contentReply || '无回复' }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 回复对话框 -->
    <el-dialog title="回复用户申诉" :visible.sync="dialogVisible" width="30%">
      <el-form :model="replyForm">
        <el-form-item label="回复内容">
          <el-input type="textarea" v-model="replyForm.contentReply" placeholder="请输入回复内容"></el-input>
        </el-form-item>
        <el-form-item label="申诉状态">
          <el-select v-model="replyForm.status" placeholder="请选择状态">
            <el-option label="已审查" value="reviewed"></el-option>
            <el-option label="已解决" value="resolved"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReply">提交回复</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      appeals: [], // 申诉数据
      selectedAppeal: null, // 当前选中的申诉
      dialogVisible: false, // 控制回复对话框的可见性
      detailDialogVisible: false, // 控制详情对话框的可见性
      replyForm: {
        contentReply: '', // 回复内容
        status: ''   // 申诉状态
      }
    };
  },
  mounted() {
    this.loadAppeals(); // 组件挂载后加载申诉数据
  },
  methods: {
    // 加载申诉数据
    async loadAppeals() {
      try {
        const response = await axios.get('http://localhost:9090/api/appeals');
        this.appeals = response.data;
      } catch (error) {
        console.error('获取申诉数据失败:', error);
      }
    },
    // 查看申诉详情
    viewDetails(appeal) {
      this.selectedAppeal = appeal;
      this.detailDialogVisible = true; // 打开详情对话框
    },
    // 打开回复表单
    openReplyForm(appeal) {
      this.selectedAppeal = appeal;
      this.dialogVisible = true; // 打开回复对话框
      this.replyForm.contentReply = ''; // 清空表单
      this.replyForm.status = ''; // 重置状态
    },
    // 提交回复
    async submitReply() {
      if (!this.replyForm.contentReply) {
        alert('请输入回复内容');
        return;
      }
      try {
        // PUT 请求到新的回复接口
        await axios.put(`http://localhost:9090/api/appeals/${this.selectedAppeal.id}/reply`, {
          contentReply: this.replyForm.contentReply,
          status: this.replyForm.status
        });
        
        // 更新前端显示的申诉内容
        this.selectedAppeal.contentReply = this.replyForm.contentReply;
        this.selectedAppeal.status = this.replyForm.status;
        
        // 关闭回复对话框
        this.dialogVisible = false;
        alert('回复成功！');
        
        // 重置回复表单
        this.replyForm.contentReply = '';
        this.replyForm.status = '';
      } catch (error) {
        console.error('回复申诉失败:', error);
        alert('回复失败，请重试。');
      }
    },
    // 根据状态显示不同的样式
    statusClass(status) {
      if (status === 'resolved') {
        return 'text-success';
      } else if (status === 'reviewed') {
        return 'text-warning';
      } else {
        return 'text-muted';
      }
    }
  }
};
</script>

<style scoped>
.appeal-container {
  background-color: #f8f9fa;
  padding: 40px;
  border-radius: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.page-title {
  font-weight: 700;
  font-size: 2.5rem;
  color: #343a40;
}

.table th, .table td {
  vertical-align: middle;
}

.thead-light th {
  background-color: #e9ecef;
}

.text-success {
  color: #28a745;
  font-weight: bold;
}

.text-warning {
  color: #ffc107;
  font-weight: bold;
}

.text-muted {
  color: #6c757d;
  font-weight: bold;
}

.dialog-footer {
  text-align: right;
}
</style>
